<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
	<title>Restaurant Picker</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.css" />
	<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
	<link rel="stylesheet" href="css/custom.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
	<script src="js/jquery.localize.js"></script>
	<script src="js/funciones.js"></script>
</head> 
<body> 
<div id="choisir_restau" data-role="page" data-add-back-btn="true">
	
	<div data-role="header"> 
		<h1> Restaurant Picker</h1>
	</div> 

	<div data-role="content">
	
	<div class="choice_list"> 
		<h1 data-localize="choose-rest">Choose a restaurant</h1>
	</div>
	
	<div id="notation">
	
		<ul data-role="listview" data-inset="true" id="placesSelectionsOpen">
		</ul>
	
	</div>
	</div>
	
	<label id="spinerText" class="ui-hidden-accessible" data-localize="spiner-text">loading</label>

</div><!-- /page -->
<script>
var placesSelectionsOpenVar;
var placesSelectionsClosedVar;
$(document).ready(function () {
	$("[data-localize]").localize("idioma", { pathPrefix: "lang", skipLanguage: /^en/ });
	placesSelectionsOpenVar = $('#placesSelectionsOpen');
	placesSelectionsClosedVar = $('#placesSelectionsClosed');
	loadRest();
});
function loadRest(){
	showLoadingSpiner()
	var id = getURLParameters('id');
	$.get(pickerSupport.searchRestaurants(id, 'setRestList'));
}
function showRest(restId){
	pickerSupport.loadPage('restaurant.html?id='+restId);
}
function setRestList(jsonText){
	var tmpJson = $.parseJSON(jsonText);
	if(tmpJson != null && tmpJson.places != null){
		for(i = 0; i < tmpJson.places.length; i++){
			var tmpDisplayId = "'"+tmpJson.places[i].id+"'";
			var tmpDisplayName = tmpJson.places[i].name;
			var tmpDisplayAddress = tmpJson.places[i].formatted_address;
			var tmpDisplayRating = tmpJson.places[i].rating;
			var tmpDisplayDistance = tmpJson.places[i].distance;
			var tmpLiFragment = '<li><a href="javascript:showRest('+tmpDisplayId+');"><h2>'+tmpDisplayName+'</h2><p>'+tmpDisplayAddress+'<br>('+tmpDisplayDistance+')</p><span class="stars1">'+tmpDisplayRating+'</span></a></li>';
			
			placesSelectionsOpenVar.append(tmpLiFragment);
		}
	}
	$('span.stars1').stars();
	placesSelectionsOpenVar.listview('refresh');
	placesSelectionsClosedVar.listview('refresh'); 
	hideLoadingSpiner()
}
</script>
</body>
</html>